<template>
<div>
    <my-header :biaoti="myHeaderBiaoTi"></my-header>
    <button @click="handleclick" ref="btn">点击{{count}}次</button>
    <button @click="handleClickForVuex">点击+1给vuex</button>
    <ul>
        <li><router-link to="/">首页index</router-link></li>
         <li><router-link to="/test">测试页test</router-link></li>
    </ul>
    <router-view></router-view>
</div>
</template>
<script>
// import MyHeader from './components/MyHeader.vue'
export default {
    components:{
        // MyHeader
    },
    data() {
        return {
            count:0,
            myHeaderBiaoTi:"标题",
            str:"hello"
        }
    },
    methods: {
         handleClickForVuex(){
            this.$store.commit("increment")
        },
      async  handleclick(){
            this.count++;
           
            // this.$nextTick(function(){
            //     console.log(this.$refs.btn.innerText);
            // })

        await this.$nextTick();
        console.log(this.$refs.btn.innerText);
            

        },
       
    },
    beforeMount() {
        console.log("渲染前", this.count)
    },
    mounted() {
        console.log("渲染完毕", this.count)
    },
    beforeUpdate() {
          console.log("组件更新前", this.count)
    },
    updated() {
        console.log("组件更新后", this.count)
        //  console.log(this.$refs.btn.innerText);//虽然count的值已经改变，但dom不是马上更新，所以拿不到dom对象新的值
    },
}
</script>
<style>
</style>